<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>评论列表</title>
  <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/iconfont.css">
  <link rel="stylesheet" href="css/main.css">
  <script src="./libs/jquery-1.12.4.min.js"></script>
  <script src="./libs/template-web.js"></script>
  <style>
    tr>td:nth-child(2),
    tr>td:nth-child(3) {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

    }
  </style>
</head>

<body>
  <div class="container-fluid">
    <div class="common_title">
      评论列表
    </div>
    <div class="container-fluid common_con">
      <table class="table table-striped table-bordered table-hover mp20" style="table-layout: fixed;">
        <thead>
          <tr>
            <th style="width: 5%">作者</th>
            <th style="width: 33%;">评论</th>
            <th style="width: 33%;">评论在</th>
            <th style="width: 11%;">提交于</th>
            <th style="width: 5%;">状态</th>
            <th style="width: 11%;" class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody>

        </tbody>
      </table>
      <div class="row text-center">
        <ul id="pagination-demo" class="pagination-sm"></ul>
      </div>

    </div>
  </div>
  <script src="./libs/http.js"></script>
  <script src="./libs/jquery.twbsPagination.js"></script>
  <script id="comment-temp" type="text/html">
    {{each data.data v}}
      {{if v.state === '待审核'}}
        <tr class="danger">
      {{else}}
        <tr>
      {{/if}}
        <td>{{v.author}}</td>
        <td>{{v.content}}</td>
        <td>{{v.title}}</td>
        <td>{{v.date}} {{v.time}}</td>
        <td>{{v.state}}</td>
        <td class="text-center">
          {{if v.state === "待审核"}} 
          <a data-id="{{v.id}}" href="javascript:void(0);;" class="btn btn-info btn-xs pass">批准</a>
          {{else if v.state === '已通过'}}
          <a data-id="{{v.id}}" href="javascript:void(0);;" class="btn btn-warning btn-xs reject">拒绝</a>
         {{/if}}
          <a data-id="{{v.id}}" href="javascript:void(0);;" class="btn btn-danger btn-xs delete">删除</a>
        </td>
      </tr>
    {{/each}}
</script>
  <script>
    $(function () {
      // 获取评论
      function getCommentList(option = {}, initPage = true) {
        $.ajax({
          type: 'get',
          url: BigNew.comment_list,
          contentType: 'json',
          data: {
            page: option.page || 1,
            perpage: option.perpage || 10
          },
          success: function (backData) {
            if (backData.code === 200) {
              console.log(backData);
              if (backData.code === 200) {
                $('tbody').html(template('comment-temp', backData))

                if (initPage) {
                  // 销毁分页器
                  $('#pagination-demo').twbsPagination('destroy');
                  if (backData.data.data.length !== 0) {
                    // 初始化分页器
                    $('#pagination-demo').twbsPagination({
                      totalPages: backData.data.totalPage,
                      visiblePages: 10,
                      startPage: 1,
                      hideOnlyOnePage: true,
                      first: '首页',
                      prev: '上一页',
                      next: '下一页',
                      last: '尾页',
                      onPageClick: function (event, page) {
                        $('#page-content').text('Page ' + page);
                        if (!initPage) { // 防止分页器初始化时,重复获取第一页数据
                          console.log(page, '下一页');
                          getCommentList({ page }, false)
                        }
                      }
                    });
                  }
                }
              }
            }
          }
        })
        initPage ? setTimeout(() => initPage = false, 500) : null;
      }
      getCommentList();

      // 评论通过
      // $('tbody').on('click', '.pass',function () {
      //   $.ajax({
      //     type: 'post',
      //     url: BigNew.comment_pass,
      //     data: {id: $(this).attr('data-id')},
      //     success: (backData) => {
      //       console.log(backData);
      //       if (backData.code === 200) {
      //         $(this).removeClass('btn-info pass').addClass('btn-warning reject').text('拒绝').parent().prev().text(backData.msg);
      //       }
      //     }
      //   })
      // })

      // // 评论不通过
      // $('tbody').on('click', '.reject',function () {
      //   $.ajax({
      //     type: 'post',
      //     url: BigNew.comment_reject,
      //     data: {id: $(this).attr('data-id')},
      //     success: (backData) => {
      //       console.log(backData);
      //       if (backData.code === 200) {

      //       }
      //     }
      //   })
      // })

      // 删除评论
      // $('tbody').on('click', '.delete', function () {
      //   $.ajax({
      //     type: 'post',
      //     url: BigNew.comment_delete,
      //     data: { id: $(this).attr('data-id') },
      //     success: (backData) => {
      //       console.log(backData);
      //       if (backData.code === 200) {
      //         $(this).parent().parent().remove();
      //       }
      //     }
      //   })
      // })


      // 删除 通过 不通过
      $('tbody').on('click', '.delete,.reject,.pass', function () {
        $.ajax({
          type: 'post',
          url: ($(this).text() === '批准' ?
              BigNew.comment_pass :
              $(this).text() === '拒绝' ?
              BigNew.comment_reject :
              BigNew.comment_delete),
          data: { id: $(this).attr('data-id') },
          success: (backData) => {
            console.log(backData);
            if (backData.code === 200) {
              ($(this).text() === '批准' ?
              $(this).removeClass('btn-info pass').addClass('btn-warning reject').text('拒绝').parent().prev().text(backData.msg) :
              $(this).text() === '拒绝' ?
              $(this).parent().prev().text(backData.msg).end().end().remove() :
              $(this).parent().parent().remove());
            }
          }
        })
      })



    })
  </script>
</body>

</html>